<template>
	<view class="goodies">
		<!-- 顶部搜索框 -->
		<nav-bars backState="1000" bgColor="#191d29" fontColor="#fff" title="套餐商品"></nav-bars>
		<!-- <nav-bar class="g_top" isBack backColor="#fff">
			<view class="g_tCan" slot="center">
				<view class="g_tBg"></view>
				<view class="topy">套餐商品</view>
			</view>
		</nav-bar> -->
		<!-- 内容 -->
		<view class="g_contain">
			<view class="infoshop">
				<view class="shopimg" v-if="info.productPack"><image :src="info.productPack.lead_img"></image></view>
				<view class="shopimg" v-else></view>
				<view class="infoshop-right">
					<view class="infotitle" @click="topage(product_pack_scene.pack_id)">{{info.productPack.name}}<text>收起</text></view>
					<view class="infotext">{{area_scope}}m²</view>
					<view class="infoprie">精选套餐价：￥{{primary_price}}</view>
				</view>
			</view>
			<view class="g_cCan">
				<!-- 左边nav栏 -->
				<view class="g_cNav">
					<view class="g_cnItem" :class="{'active': classifyIndex == items.cate_id}" v-for="items in classifyList" :key="items.cate_id" @click="toggleNav(items)">
						<text class="g_cnTxt">{{items.cate_name}}</text>
					</view>
					<view class="g_cnItem"></view>
				</view>
				<!-- 右边商品分类 -->
				<view class="g_cClass">
					<view class="g_ccList">
						<view class="g_ccGroup">
							<view class="g_ccTit">{{cate_name}}</view>
							<view class="g_ccItems" v-for="(item,index) in classcont" :key="index">
								<view class="inshop" @click="tapurl(item.store_id)">
									<image src="@/static/mall/store.png"></image>
									{{item.store_name}}
									<text class="iconfont icon-more"></text>
								</view>
								<view class="goods_card" v-for="(items,indexs) in item.medical_list" :key="indexs">
								    <image @tap="packDetail(items)" class="img"  lazyLoad="true" mode="aspectFill" :src="items.main_imgurl"></image>
								    <view class="card_right">
								        <view class="title ell-2" @tap="packDetail(items)">{{items.product_title}}</view>
										<view class="futitle">
											<view v-for="(attr_params,index) in items.attribute" style="display: inline-block;">
												<text v-if="attr_params.attr_name">{{attr_params.attr_value}}/</text>
												<text v-if="attr_params.key">{{attr_params.value}}/</text>
											</view>
											<view class="titlenum">x{{items.num}}</view>
									    </view>
										<view class="price">￥<text>{{items.price}}</text></view>
										<view class="goods_btn" @click="gitreplace(items)">替换</view>
								    </view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="puctbottom">
			<view class="attribute">
				<view class="N_ibute">
					<view class="N_name" @click="chosepop(item)" v-for="(item,index) in info.productPack.sku_lst" :class="{'active':item.area_scope == area_scope}">{{item.area_scope}}m²</view>
				</view>
			</view>
			<view class="inbtn">
				<view class="i_pire">
					<text class="i-m1">精选套餐价:￥{{primary_price}}</text>
					<text class="i-m2">实付价:￥{{s_price}}</text>
				</view>
				<view class="i-btn">
					<text class="i-b1" @click="addPackcart()">加入购物车</text>
					<text class="i-b2" @click="buy()">立即购买</text>
				</view>
			</view>
		</view>
		
		<!-- 替换商品 -->
		<view class="g_contains-th" v-if="replaceshopshow">
			<view class="thcot">当前套餐商品 <text @click="replaceclose">关闭</text></view>
			<view class="infoshop" v-if="replaceshop.product_title">
				<view class="shopimg"><image :src="replaceshop.main_imgurl"></image></view>
				<view class="infoshop-right">
					<view class="infotitle">{{replaceshop.product_title}}</view>
					<view class="infotext">
						<view v-for="(attr_params,index) in replaceshop.attribute" style="display: inline-block;">
							<text v-if="attr_params.attr_name">{{attr_params.attr_value}}/</text>
							<text v-if="attr_params.key">{{attr_params.value}}/</text>
						</view>
						<view class="titlenum">x{{replaceshop.num}}</view>
					</view>
					<view class="infoprie">￥{{replaceshop.price}}</view>
				</view>
			</view>
			<view class="g_cCan">
				<!-- 可替换商品-->
				<view class="g_cClass">
				 <scroll-view class="b_scroll" scroll-y :scroll-into-view="scrollSort">
					<view class="g_ccList">
						<view class="g_ccGroup">
							<view class="g_ccTit">可替换商品</view>
							<view class="g_ccItems" v-for="(item,index) in PackLst" :key="index">
								<view class="inshop" @click="tapurl(item.store_id)">
									<image src="@/static/mall/store.png"></image>
									{{item.store_name}}
									<text class="iconfont icon-more"></text>
								</view>
								<view class="goods_card" v-for="(items,indexs) in item.medical_list" :key="indexs">
								    <image @tap="orderDetail(items)" class="img"  lazyLoad="true" mode="aspectFill" :src="items.main_imgurl"></image>
								    <view class="card_right">
								        <view class="title ell-2" @tap="orderDetail(items)">{{items.product_title}}</view>
										<view class="futitle">
											<view v-for="(attr_params,index) in items.attribute" style="display: inline-block;">
												<text v-if="attr_params.attr_name">{{attr_params.attr_value}}/</text>
												<text v-if="attr_params.key">{{attr_params.value}}</text>
											</view>
											<view class="titlenum">x{{items.num}}</view>
									    </view>
										<view class="price">￥<text>{{items.price}}</text></view>
										<view class="goods_btn" @click="showSizePop(items)">替换</view>
								    </view>
								</view>
							</view>
						</view>
					</view>
			      </scroll-view>		
				</view>
			</view>
		</view>
		
		<!-- 弹窗-规格 -->
		<view class="Size" v-if="sizePop" @touchmove.stop.prevent>
			<view class="S_bg"></view>
			<view class="S_box">
				<view class="S_bCloak" @tap="hideSizePop"></view>
				<view class="S_bContain">
					<view class="S_bClose" @tap="hideSizePop"><view class="S_bcIcon"><text class="iconfont icon-cancel"></text></view></view>
					<view class="S_bInfo">
						<view class="S_biHead"><image :src="cartdata.main_imgurl" mode="aspectFit"></image></view>
						<view class="S_biCan">
							<view class="c_tit">{{cartdata.product_title}}</view>
							<view class="S_biFee">¥<text>{{cartdata.price}}</text></view>
							<view class="S_biRemark">原价：￥{{cartdata.primary_price}}</view>
						</view>
					</view>
					<scroll-view class="S_bConfig" scroll-y>
						<view class="S_bcCan">
							<view class="s_btit">可选择:</view>
							<view class="S_bc" :class="{active:item.sku_id==Skuid}" v-for="(item,index) in cartdata.sku_data" @click="checkedEvent(item)">
								<text v-for="(items,index) in item.attribute">{{items.value}},</text>{{item.num}}件
							</view>
						</view>
					</scroll-view>
					<view class="S_bBtns">
						<view class="S_bbBtn1" @click="pcutCart" style="width: 100%;">替换当前套餐商品</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import URL from '@/config/url.js'
import navBar from '@/components/navBar/navBar.vue'
import service_product from '@/service/product.js'
import service_mall from '@/service/mall.js'

export default {
	components: { navBar },
	
	data() {
		return {
			classifyIndex: null,
			classifyList: [],
			classcont:[],
			info: '',
			cate_name :'',
			product_pack_scene:"",
			area_scope:'',
			area_price:'',
			primary_price:'',
			s_price:'',
			PackLst:[],
			replaceshop:"",
			replaceshopshow:false,
			diy_list_id:'',
			sku_id:'',
			pack_id:'',
			// 规格
			sizePop: false,
			sizeImage: null,   // 规格图片
			sizePrice: null,   // 规格价格
			sizeNum: 1,
			cartdata:'',
			Skuid:'',
		}
	},
	
	onLoad(params) {
		this.$utils.getUrl()
		this.pack_id = params.pack_id
	},
	onShow() {
		this.getDetail()
		this.getList()
	},
	methods: {
		topage(id){
			uni.navigateTo({
				url: '/pages_product/pages/product/detail/detail?pack_id=' + id,
			});
		},
		tapurl(store_id){
			uni.navigateTo({ url: '/pages_product/pages_mall/pages/mall/store/store?storeId=' + store_id })
		},
		// 获取详情数据
		getDetail() {
			service_product.getPackDetail({ pack_id:this.pack_id})
				.then(res => {
					if (res.code == 1) {
						let data = res.data
						this.info = data
						this.product_pack_scene = data.product_pack_scene
						this.area_scope = data.productPack.sku_lst[0].area_scope
						this.primary_price= data.productPack.primary_price
						this.s_price = data.productPack.sku_lst[0].price
						this.sku_id = data.productPack.sku_lst[0].id
					}
				})
		},
		// 获取分类列表数据
		getList() {
			service_product.class_getList({pack_id:this.pack_id})
			.then(res => {
				if (res.code == 1) {
				   this.classifyList = res.data
				   if(this.classifyList.length>0){
					   this.classifyIndex = this.classifyList[0].cate_id
					   this.cate_name = this.classifyList[0].cate_name
					   this.packProduct()
				   }
				   
				}
			})
			.catch(err => {
				
			})
		},
		// 弹窗-规格
		showSizePop(item) {
			this.cartdata = item
			this.sizeNum = 1
			this.sizePop = true
		},
		hideSizePop() {
			this.sizePop = false
			this.Skuid = ""
		},
		//选择规格
		checkedEvent(data){
			this.Skuid = data.sku_id
		},
		// 购买产品包
		buy(){
			let params ={
				origin_type :2,
				cart_ids :'',
				goods:{
					sku_id:this.sku_id,
					pack_id:this.pack_id,
					num:1
				}
			}
			uni.setStorage({
			    key: 'order_list',
			    data: params,
			    success:  ()=> {
					uni.navigateTo({
						url:"/pages_product/pages/product/order/order?sourceFrom=detail&Nocart=1"
					})
			    }
			});
		},
		// 选择替换
		gitreplace(item){
			this.replaceshopshow = true
			this.diy_list_id = item.diy_list_id
			this.replacePackLst();
		},
		replaceclose(){
			this.replaceshopshow = false
		},
		// 可替换商品
		replacePackLst() {
			service_product.packreplacePackLst({diy_list_id:this.diy_list_id,pack_id:this.pack_id,})
			.then(res => {
				if (res.code == 1) {
				   let data = res.data
				   this.PackLst = data.replace_product  
				   this.replaceshop = data.now_prodcuct
				}
			})
			.catch(err => {
				
			})
		},
		// 替换商品
		pcutCart(e) {
			let token = uni.getStorageSync('token');
			if(!token){
				uni.navigateTo({
					url: '/pages_login/pages/login/login/index',
				});
			}
			if(!this.Skuid){
					uni.showToast({
					    title: '请选择规格',
						icon: 'none',
					    duration: 2000
					});
				return
			}
			service_product.replaceProduct({diy_list_id:this.diy_list_id,sku_id:this.Skuid,product_id:this.cartdata.product_id,pack_id:this.pack_id})
				.then(res => {
					if (res.code == 1) {
					  uni.showToast({ title: "替换商品成功！", icon: "success" })
					  this.sizePop = false
					  this.Skuid = ""
					  this.replacePackLst()
					}
			})	
		},
		//跳转可替换商品详情
		orderDetail(item){
			uni.navigateTo({ url:'/pages_product/pages/product/goods_details/goods_details?product_id=' + item.product_id + '&pack_id=' + item.pack_id + '&diy_list_id=' + item.diy_list_id })
		},
		//跳转产品包商品详情
		packDetail(item){
			uni.navigateTo({ url:'/pages_product/pages/product/pack_details/pack_details?diy_list_id=' + item.diy_list_id + '&pack_id=' + item.pack_id + '&product_id=' + item.product_id })
		},
		// 切换面积
		chosepop(item){
			this.area_scope = item.area_scope
			this.s_price = item.price
			this.sku_id = item.id
		},
		// 加入购物车
		addPackcart() {
			service_mall.goods_getadd({pack_id:this.pack_id,type:2,sku_id:this.sku_id,num:1})
			.then(res => {
				if (res.code == 1) {
				  uni.showToast({ title: "添加购物车成功", icon: "success" })
				}
			})
			.catch(err => {
				
			})
		},
		// 获取分类商品数据
		packProduct() {
			service_product.packProduct({pack_id:this.pack_id,cate_id:this.classifyIndex})
				.then(res => {
					if (res.code == 1) {
		               this.classcont = res.data 
					}
				})
				.catch(err => {
					
				})
		},
		
		// 切换nav栏
		toggleNav(items) {
			if (this.classifyIndex != items.cate_id) {
				this.classifyIndex = items.cate_id
				this.cate_name  = items.cate_name 
				this.classcont = items
				this.packProduct();
			}
		},
        searchData(){
			uni.navigateTo({ url: '/pages_mall/pages/mall/goods/list?keyword=' + this.searchVal })
		},
		// 跳转分类所属商品列表
		intoStore(cateId){
			uni.navigateTo({ url:'/pages_mall/pages/mall/goods/list?cate_id_lst=' + cateId })
		},
	}
}
</script>

<style lang="scss" scoped>
.goodies {height: 100vh;display: flex;flex-flow: column;background:#191d29;
	// 顶部搜索框
	.g_top {position: relative;z-index: 100;
		.g_tCan {width: 100%;height: 66rpx;padding-right: 24rpx;}
		.g_tBg {width: 100vw;height: 500rpx;background: linear-gradient(135deg, #2e333f 0%, #191d29 100%);position: fixed;top: 0;left: 0;z-index: -1;}
		.g_tInput {height: 66rpx;border-radius: 34rpx;background: #fff;position: relative;opacity: .8;
			& > input {width: 100%;height: 100%;font-size: 24rpx;padding-left: 72rpx;}
		}
		.g_tIcon {width: 32rpx;height: 32rpx;line-height: 32rpx;color: #6c6c6c;font-size: 32rpx;position: absolute;top: 18rpx;left: 32rpx;}
	}
	
	// 内容
	.g_contain {margin-top: 40rpx;position: relative;z-index: 101;overflow: hidden;flex: 1;border-radius: 10px 10px 0 0;
    background: #fff;
		.g_cCan {height: 100%;background: #fff;display: flex;overflow: hidden;padding-bottom: 400rpx;}
		// 左边nav栏
		.g_cNav {width: 172rpx;height: 100%;background-color: #f6f7fb;overflow: auto;padding-bottom: 50rpx;
			.g_cnItem {width: 100%;height: 110rpx;line-height: 110rpx;text-align: center;background: #f6f7fb;position: relative;z-index: 2;
				&.active {font-weight: bold;color: #a98f68;background: #fff;z-index: 1;}
			}
			.g_cnTxt {position: relative;z-index: 2;}
		}
		// 右边商品分类
		.g_cClass {margin-left: 32rpx;flex: 1;overflow: auto;padding-bottom: 50rpx;
			.g_ccList {}
			.b_scroll {width: 100%;height: 100%;}
			.g_ccTit {height: 50rpx;line-height: 50rpx;font-size: 30rpx;font-weight: normal;padding-top: 20rpx;margin-left: 12rpx;background: #fff;box-sizing: content-box;}	
			.g_ccItems {display: flex;flex-wrap: wrap;padding-right: 20rpx;}
			.g_ccItem {width: 156rpx;margin-left: 12rpx;display: flex;flex-wrap: wrap;justify-content: center;}
			.g_ccImage {width: 156rpx;height: 156rpx;}
			.g_ccTxt {font-size: 24rpx;line-height: 44rpx;}
		}
	}
}
.infoshop{
	padding-left: 220rpx;
	position: relative;
	padding-right: 20rpx;
	padding-top: 20rpx;
	border-radius: 20rpx 20rpx 0 0;
	background: #fff;
	padding-bottom: 30rpx;
	border-bottom: 1px #dedede solid;
	.shopimg{
		width: 180rpx;
		height: 140rpx;
		position: absolute;
		left: 20rpx;
		top: 20rpx;
		background: #d8d8d8;
		border-radius: 15rpx;
	}
	.infotitle{
		font-size: 30rpx;
		font-weight: bold;
		padding-right: 90rpx;
		position: relative;
		line-height: 50rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		text{
			position: absolute;
			right: 0;
			top:0;
			font-weight: normal;
		}
	}
	.infotext{
		font-size: 28rpx;
		color: #999;
		line-height: 50rpx;
	}
	.infoprie{
		font-size: 30rpx;
		color: #E9423E;
	}
	.infobtn{
		position: absolute;
		right: 20rpx;
		bottom:20rpx;
		border: 1px #E9423E solid;
		color: #E9423E;
		padding: 6rpx 20rpx;
		border-radius: 8rpx;
	}
	    
}
.topy{
	color: #fff;
	line-height: 66rpx;
	text-align: center;
	padding-left: 80rpx;
	font-size: 32rpx;
}
.img {
    border-radius: 8rpx;
    width: 170rpx;
    height: 170rpx;
    flex-shrink: 0;
    background-color: #f6f6f6;
}
.goods_card {
    display: flex;
    padding-top: 20rpx;
    align-items: center;
	width: 100%;
	position: relative;
}

.card_right {
    font-size: 26rpx;
    padding-left: 30rpx;
    width: 100%;
    min-width: 300rpx;
    color: #807e7e;
}
.orderid{color: #999;font-size: 26rpx;}
.card_bottom {
    justify-content: flex-end;
}

.card_bottom,.card_top {
    display: flex;
    align-items: center;
	padding: 15rpx 0;
}

.card_top {
    justify-content: space-between;
    font-size: 30rpx;
    padding-bottom: 10rpx;
    color: #777;
}

.item-status {
    color: #f87901;
    font-size: 28rpx;
}

.status-0,.status--1 {
    color: red;
}

.status-3 {
    color: green;
}

.title {
    width: 95%;
    font-size: 30rpx;
    color: #525050;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.goods_price {
    font-size: 28rpx;
    text-align: right;
    padding-bottom: 24rpx;
    padding-top: 20rpx;
}

.goods_price text {
    font-size: 32rpx;
        color: #C3AB7C;
        margin-left: 20rpx;
}

.pay-for {
    border: 2rpx solid #C3AB7C;
	padding: 8rpx 30rpx;
	color: #C3AB7C;
	border-radius: 40rpx;
	font-size: 30rpx;
	margin-left: 20rpx;
}

.order-bnt {
    border: 2rpx solid #505050;
    color: #505050;
    border-radius: 40rpx;
}

.order-bnt,.order-comfirm {
    padding: 8rpx 20rpx;
    font-size: 30rpx;
    margin-left: 20rpx;
}

.order-comfirm {
    border: 4rpx solid #e79e00;
    color: #eea301;
    background-color: #faf5e9;
    border-radius: 8rpx;
}

.index {
    position: fixed;
    left: 10rpx;
    bottom: 10rpx;
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 26rpx;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    border-radius: 50%;
}

.tag {
    padding: 6rpx 14rpx;
    border-radius: 8rpx;
    font-size: 22rpx;
    color: green;
    background-color: #f5fff5;
    margin-right: 14rpx;
	    display: inline-block;
}

.group-icon {
    font-size: 22rpx;
    padding: 0;
	display: inline-block;
}

.price {
    padding-top: 18rpx;
	color: #E9423E;
	font-size: 20rpx;
	text{
		font-size: 26rpx;
		font-weight: bold;
	}
}
.inshop{
	padding-left: 50rpx;
	position: relative;
	line-height: 80rpx;
	width: 100%;
	image{
		position: absolute;
		top:20rpx;
		left: 0;
		width: 40rpx;
		height: 40rpx;
	}
	text{
		float: right;
	}
	.iconfont{
		float: right;
	}
}
.futitle {
	overflow: hidden;
    padding-top: 18rpx;
	font-size: 22rpx;
}
.titlenum{
	display: inline-block;
	float: right;
}
.attribute{
	    overflow: auto;
	    display: flex;
		.N_ibute{
			padding: 0 20rpx 20rpx;
			display: flex;
		}
		.N_name {     
			width: 160rpx;
			line-height: 60rpx;
			text-align: center;
			margin-right: 20rpx;
			color: #666;
			background: #F6F7FB;
			-webkit-border-radius: 27px;
			border-radius: 50rpx;
			font-size: 25rpx;
			&:nth-last-child(1) {margin: 0;}
		}
		.N_name.active{
			background: none;
			border:1px #E9423E  solid;
			color: #E9423E;
		}
}
.puctbottom{
	background: #fff;padding: 20rpx 0;position: fixed;bottom:0;width: 100%;left: 0;z-index: 999;box-shadow: 4rpx 4rpx 10rpx 4rpx #eee;
}
.inbtn{
	position: relative;
	padding: 20rpx;
	padding-left: 300rpx;
	.i_pire{
		position: absolute;
		top:20rpx;
		left: 20rpx;
		text{
			display: block;
			font-size: 26rpx;
		}
		.i-m1{
			color: #333;
		}
		.i-m2{
			color: #E9423E;
		}
	}
	.i-btn{
		border-radius: 10rpx;
		overflow: hidden;
		text{
			display: inline-block;
			width: 50%;
			line-height: 70rpx;
			color: #fff;
			text-align: center;
		}
		.i-b1{
			background: #C3AB7C;
		}
		.i-b2{
			background: #1A1C20;
		}
	}
}
.goods_btn{
	position: absolute;
	right: 0;
	bottom: 0rpx;
	width: 88rpx;
	line-height: 40rpx;
	text-align: center;
	border: 1px #C3AB7C solid;
	color: #C3AB7C;
	border-radius: 20rpx;
}
.g_contains-th{
	position: fixed;
	top: 160rpx;
	width: 100%;
	left: 0;
	z-index: 9999;
	bottom: 0;
	overflow: auto;
	.infoshop{border-radius:0;}
	.thcot{padding: 20rpx;background: #fff;border-radius: 20rpx 20rpx 0 0;font-weight: bold;
	       text{float: right;font-weight: normal;}
	}
	.g_cCan {height: 100%;background: #fff;display: flex;overflow: hidden;}
	// 商品
	.g_cClass {flex: 1; padding:0 20rpx;
		.g_ccList {height: 100%;overflow-y: auto;}
		.g_ccTit {height: 50rpx;line-height: 50rpx;font-size: 30rpx;font-weight: bold;padding-top: 20rpx;margin-left: 12rpx;background: #fff;box-sizing: content-box;}	
		.g_ccItems {display: flex;flex-wrap: wrap;padding-right: 20rpx;}
		.g_ccItem {width: 156rpx;margin-left: 12rpx;display: flex;flex-wrap: wrap;justify-content: center;}
		.g_ccImage {width: 156rpx;height: 156rpx;}
		.g_ccTxt {font-size: 24rpx;line-height: 44rpx;}
	}
}
// 筛选
.b_filter {width: 52rpx;position: fixed;top: 50%;right: 0;z-index: 2;transform: translateY(-50%);
	.b_fLetter {height: 32rpx;line-height: 32rpx;text-align: center;font-size: 20rpx;padding-left: 20rpx;}
}
// 弹窗-规格
.Size {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999999;
	.S_bg {width: 100%;height: 100%;background: rgba(0, 0, 0, .8);}
	.S_box {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;flex-flow: column;}
	.S_bCloak {height: 176rpx;}
	.S_bContain {border-radius: 24rpx 24rpx 0 0;background: #fff;position: relative;overflow: hidden;display: flex;flex-flow: column;flex: 1;}
	.S_bClose {width: 104rpx;height: 120rpx;position: absolute;top: 0;right: 0;display: flex;justify-content: center;align-items: center;
		.S_bcIcon {width: 40rpx;height: 40rpx;line-height: 40rpx;text-align: center;color: #000;font-size: 20rpx;border-radius: 50%;background: #f9f6f3;}
	}
	.S_bInfo {padding: 36rpx 32rpx 20rpx;
		.S_biHead {width: 178rpx;height: 178rpx;margin-right: 24rpx;border-radius: 10rpx;background: #f0f0f0;box-shadow: 0 4rpx 4rpx 0 rgba(136, 136, 136, .16);overflow: hidden;float: left;}
		.S_biCan {overflow: hidden;}
		.S_biFee {height: 60rpx;line-height: 60rpx;color: #e9423e;font-size: 32rpx;font-weight: bold;margin-top: 32rpx;
			& > text {font-size: 44rpx;}
		}
		.S_biTip {height: 40rpx;line-height: 40rpx;color: #e9423e;font-size: 20rpx;margin-top: 10rpx;border-radius: 4rpx;display: inline-block;
		  .yprice{margin-left: 0;}
		}
		.S_biRemark {height: 28rpx;line-height: 28rpx;color: #939393;font-size: 20rpx;margin-top: 10rpx;}
	}
	.S_bConfig {overflow: hidden;flex: 1;
		.S_bcCan {padding: 0 34rpx 146rpx;}
		.S_bcGroup {padding-top: 40rpx;position: relative;
			&:first-child {padding-top: 20rpx;}
		}
		.S_bcTit {height: 40rpx;line-height: 40rpx;font-weight: bold;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
		.S_bcChecks {padding-top: 8rpx;}
		.S_bcCheck {height: 42rpx;line-height: 42rpx;color: #939393;font-size: 24rpx;padding: 0 26rpx;margin: 16rpx 16rpx 0 0;border-radius: 22rpx;background: #f5f5f5;display: inline-block;
			&.checked {color: #e9423e;background: #feeff2;}
		}
		.S_bcNums {height: 48rpx;position: absolute;top: 36rpx;right: -22rpx;display: flex;}
		.S_bcNum {width: 72rpx;height: 48rpx;line-height: 48rpx;text-align: center;border-radius: 8rpx;background: #f6f7fb;}
		.S_bcMinus, .S_bcAdd {width: 72rpx;height: 48rpx;position: relative;}
		.S_bcMinus::before, .S_bcAdd::before, .S_bcAdd::after {content: "";width: 24rpx;height: 4rpx;border-radius: 4rpx;background: #333;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
		.S_bcAdd::after {width: 4rpx;height: 24rpx;}
	}
	.S_bBtns {height: 86rpx;color: #fff;font-weight: bold;padding: 20rpx 48rpx 0;border-top: 1px solid #f8f6f3;background: #fff;position: absolute;bottom: 0;left: 0;right: 0;box-sizing: content-box;display: flex;justify-content: space-between;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
		.S_bbBtn1, .S_bbBtn2 {width: 294rpx;height: 72rpx;line-height: 72rpx;text-align: center;border-radius: 8rpx;background: #c3ab7c;
			&:active {opacity: .88;}
		}
		.S_bbBtn2 {background: #333;}
	}
}
.s_btit{
	font-size: 28rpx;
	font-weight: bold;
	line-height: 88rpx;
}
.S_bc{
	    background: #F5F5F5;
	    color: #939393;
	    padding: 8rpx 30rpx;
	    display: inline-block;
	    margin-right: 30rpx;
	    border-radius: 40rpx;
	    margin-bottom: 30rpx;
}
.S_bc.active{
	color: #E9423E;
	background: #FEEFF2;
}
</style>